<template>
    <div id="forcechart">
        <div id="force"></div>
        <div id="forceOption">
          <template>
            <div class="block">
              <span>Force:</span>
              <el-row>
                <el-col :span="18">
                  <el-slider v-model="strengthFore" :format-tooltip="strengthFormat" @change="paramChange"></el-slider>
                </el-col>
                <el-col :span="6">
                  <el-input v-model="strength" placeholder=""></el-input>
                </el-col>
              </el-row>
            </div>
          </template>
           <template>
            <div class="block">
              <span>distanceMin:</span>
              <el-row>
                <el-col :span="18">
                  <el-slider v-model="distanceMinForce" :format-tooltip="distanceMinFormat" @change="paramChange"></el-slider>
                </el-col>
                <el-col :span="6">
                  <el-input v-model="distanceMin" placeholder=""></el-input>
                </el-col>
              </el-row>
            </div>
          </template>
           <template>
            <div class="block">
              <span>distanceMax:</span>
              <el-row>
                <el-col :span="18">
                  <el-slider v-model="distanceMaxForce" :format-tooltip="distanceMaxFormat" @change="paramChange"></el-slider>
                </el-col>
                <el-col :span="6">
                  <el-input v-model="distanceMax" placeholder=""></el-input>
                </el-col>
              </el-row>
            </div>
          </template>
           <el-button type="primary" plain @click="addData">增加数据</el-button>
           <el-button type="primary" plain @click="deleteData">删除数据</el-button>
           <br>
           <template>
             <span>相关层数:</span>
             <el-select v-model="selectValue" placeholder="请选择" @change="selectChange">
               <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
             </el-select>
           </template>
        </div>
    </div>
</template>
<script>
import {ForceChart} from './ForceChart'
export default {
  data () {
    return {
      forceData: [],
      selectValue: 1,
      options: [
        {
          value: 1,
          label: 1
        },
        {
          value: 2,
          label: 2
        },
        {
          value: 3,
          label: 3
        },
        {
          value: 4,
          label: 4
        }
      ],
      forceChart: '',
      strength: -600,
      distanceMin: 100,
      distanceMax: 300
    }
  },
  created () {
    this.forceChart = new ForceChart('force')
  },
  mounted () {
    this.getData()
  },
  computed: {
    strengthFore: {
      get: function () {
        return -this.strength / 10
      },
      set: function (d) {
        this.strength = -d * 10
      }
    },
    distanceMinForce: {
      get: function () {
        return this.distanceMin / 10
      },
      set: function (d) {
        this.distanceMin = d * 10
      }

    },
    distanceMaxForce: {
      get: function () {
        return this.distanceMax / 10
      },
      set: function (d) {
        this.distanceMax = d * 10
      }
    }
  },
  methods: {
    async getData () {
      let {data: res} = await this.$http.get('./static/data/force.json')
      this.forceData = res
      this.forceChart.data = JSON.parse(JSON.stringify(this.forceData))
      this.forceChart.draw()
    },
    paramChange () {
      this.forceChart.strength = this.strength
      this.forceChart.distanceMin = this.distanceMin
      this.forceChart.distanceMax = this.distanceMax
      this.forceChart.degree = this.selectValue
      this.forceChart.update()
    },
    selectChange () {
      this.forceChart.degree = this.selectValue
    },
    strengthFormat () {
      return this.strength
    },
    distanceMinFormat () {
      return this.distanceMin
    },
    distanceMaxFormat () {
      return this.distanceMax
    },
    addData () {
      let nodeNum = parseInt(Math.random() * 20 + 10)
      for (let i = 0; i < nodeNum; ++i) {
        this.forceData.nodes.push({
          id: 'node-' + Math.random() * 100,
          group: parseInt(Math.random() * 10)
        })
      }
      for (let i = this.forceData.nodes.length - nodeNum - 1; i < this.forceData.nodes.length; ++i) {
        let linkNum = Math.random() * 10
        for (let j = 0; j < linkNum; ++j) {
          this.forceData.links.push({
            source: this.forceData.nodes[i].id,
            target: this.forceData.nodes[parseInt(Math.random() * this.forceData.nodes.length - 1)].id,
            value: parseInt(Math.random() * 10)
          })
        }
      }
      this.forceChart.data = JSON.parse(JSON.stringify(this.forceData))
      this.forceChart.update()
    },
    deleteData () {
      let deleteNum = parseInt(Math.random() * 20 + 10)
      let delteNodes = []
      for (let i = 0; i < deleteNum; ++i) {
        delteNodes.push(this.forceData.nodes.splice(parseInt(Math.random() * this.forceData.nodes.length - 1), 1)[0].id)
      }
      for (let i = this.forceData.links.length - 1; i > -1; i--) {
        if (delteNodes.indexOf(this.forceData.links[i].source) !== -1 || delteNodes.indexOf(this.forceData.links[i].target) !== -1) {
          this.forceData.links.splice(i, 1)
        }
      }
      this.forceChart.data = JSON.parse(JSON.stringify(this.forceData))
      this.forceChart.update()
    }
  }
}
</script>
<style scoped>
#forcechart {
    height: 100%;
    width: 100%;
}

#forceOption {
    float: left;
    border: 1px solid black;
    height: calc(100% - 2px);
    width: calc(30% - 2px);
}

#force {
    border: 1px solid black;
    float: right;
    height: calc(100% - 2px);
    width: calc(70% - 2px);
}
</style>
